<template>
	<view class="my">
		<Header :userInfo="userInfo"></Header>
		<view class="operation">
			<view class="opr" v-for="(item,index) in oprList" :key="index + item.name">
				<image :src="item.icon" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<Opus :userInfo="userInfo"></Opus>
		<view class="take-photo">
			<image :src="camera"></image>
		</view>
	</view>
</template>

<script>
	import Header from './components/header.vue'
	import Opus from './components/opus-list.vue'
	import { getPersonCenter } from '@/common/api/index.js'
	import { his_down_p, audit_p, feed_back, setting, take_camera} from '@/static/svg/index.js'
	export default {
		components: { Header, Opus },
		data() {
			return {
				userInfo: {
					avator: null,
					nickname: null,
					motto: null,
					popularity: null,
					fans: null,
					follow: null,
					opus: []
				},
				camera: take_camera,
				oprList: [
					{icon: his_down_p,name: '历史下载'},
					{icon: audit_p,name: '审核进度'},
					{icon: feed_back,name: '帮助反馈'},
					{icon: setting,name: '设置中心'}
				]
			}
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			async getInfo () {
				let res = await getPersonCenter()
				if (res.code === 0){
					console.log(res, '数据')
					this.userInfo = res.data
				} else {
					console.log('请求失败')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.my {
		position: relative;
		width: 100%;
		height: 100%;
		
		.operation {
			width: 100%;
			padding: 60upx 66upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.opr {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 56upx;
					height: 56upx;
				}
				text {
					color: rgba(16, 16, 16, 100);
					font-size: 24upx;
					text-align: left;
					font-family: PingFangSC-regular;
				}
			}
		}
		.take-photo {
			width: 88upx;
			height: 88upx;
			border-radius: 44upx;
			position: fixed;
			bottom: 200upx;
			right: 48upx;
			background-color: rgba(16, 16, 16, 100);
			color: rgba(16, 16, 16, 100);
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
			border: 1px solid rgba(255, 255, 255, 100);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			image {
				width: 48upx;
				height: 48upx;
			}
		}
	}

</style>
